<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <a href="" @click.prevent="comName='login'">登录</a>
  <a href="" @click.prevent="comName='register'">注册</a>

  <transition appear mode="out-in">
    <component :is="comName"></component>
  </transition>
</div>

<script type="text/javascript">
  Vue.component('login', {
    template: '<h3>登录组件<h3>'
  })
  Vue.component('register', {
    template: '<h3>注册组件<h3>'
  })

  var vm = new Vue({
    el: '#app',
    data: {
      comName: 'login',
    },
    methods: {}
  })

</script>

<style type="text/css">
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(180px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.2s ease;
  }
</style>